<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点集合</title>
    <style>
        body{
            padding: 300px;
        }
        div{
            width: 300px;
            height: 30px;
            line-height: 30px;
            background-color: moccasin;
            margin-top: 10px;
            cursor: pointer;
        }
        .color{
            background: orange;
        }
    </style>
</head>
<body>
    <div desc="houdunren.com">后盾人<span></span></div>
    <div desc="houdunrenxitong.com">后盾系统<span></span></div>
    <div desc="houdunrenstudy.com">后盾教程<span></span></div>
</body>
</html>


<script>
   class ToChange{
       constructor(){
           //入口方法
            this.run();
           //初始化数据
           this.init_data();
           //添加事件
           this.add_event();
       }
       run(){
           //获取所有的div节点
           this.divs = document.querySelectorAll('body>div');
           this.mapDiv = new Map();
       }
       init_data(){
           this.divs.forEach((value) => {
               this.mapDiv.set(value,{
                   desc : value.getAttribute('desc')
               });
           });
       }
       add_event(){
           let that = this;
           this.mapDiv.forEach((value,index) => {
               index.addEventListener('click',function(){
                //    this.classList.toggle('color');
                if(that.mapDiv.has(index)){
                    this.style.background = 'red';
                    that.mapDiv.delete(index);
                }else{
                    this.style.background = 'moccasin';
                    that.mapDiv.set(index,{
                        desc : value.desc
                    });
                }
               });
           });
       }
   }
   new ToChange();
</script>